import React,{useState} from 'react';
import {Pagination} from 'antd';

function Displayarticles() {

    const [articles,setArticles] = useState([1,2,3,3,3,3,3,3,3,3,3,3,]);
    const [currentpage,setCurrentpage] = useState(1);
    const ulstyle = {
        margin:0,
        padding:0,
        listStyle:"none"
    };
    const listyle = {
        margin: "2vh 0"
    };

    return(
        <div>
            <ul style={ulstyle}>
            {articles.reverse().slice((currentpage-1)*10,currentpage*10).map((item,index,arrs)=>{
                return (<li style={listyle}>
                            <span>{item}</span>
                        </li>)}
                        )
            }
            </ul>
            <Pagination
                style={{"marginLeft":"15vw"}}
                total={85}
                showSizeChanger
                showQuickJumper
                defaultPageSize={1}
                showTotal={total => `Total ${total} items`}
                onChange={(page)=>{setCurrentpage(page)}}
            />
        </div>
    )

}

export default Displayarticles;
